/**
 * @description RadioButton 单项选择
 */

/**
* eg: 
* 
*     this.state = {
*       selectedKey: '111'
*     }
* 
* <RadioButton radioValue={'选项1'}   --> 选项中文
*              radioKey={'111'}      --> 选项id
*              selectedKey={this.state.selectedKey}   --> 选中项的id
*              selectedChange={this.selectedChange}   --> 选中后执行的事件
*  />
*
*  selectedChange = (key, value) => {
*      返回选中项的key和value...
*  }
*
*  非必填参数： buttonStyle, circleStyle, selectedCircleStyle, textStyle
*/

import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Image, Alert } from "react-native";
import { GLOBAL } from '../../config/global';
const scale = GLOBAL.SCALE;

export default class RadioButton extends Component {

  constructor(props) {
    super(props);

    this.state = {

    }
  }

  select = () => {
    let { selectedChange, radioKey, radioValue, disable } = this.props;
    if (disable) return;
    if (selectedChange) selectedChange(radioKey, radioValue);
  }

  //问号 功能在开发
  titleImgCallBack = (str) => {
    let info = str == '客户自提' ? `自提条款的货权转移场景，实际无物流，入库后进行货转或者派车自提，支持入库，不支持直销。如果是直销场景，对应销售需要下游客户自主去供应商处提货，请选择我司自提。` : `直销场景，不由化销配送，货不从化销外租库出库，而是由上游供应商自主配送给下游客户。如果部分量需要化销配送，或者不确定是否是直销，请选择我司配送。`
    Alert.alert('提示', info, [
      {
        text: '知道了',
      }
    ])
  }

  render () {
    let { radioKey, radioValue, selectedKey, buttonStyle, circleStyle, selectedCircleStyle, textStyle, textStyleBox, icon } = this.props;
    let titleImgObj = require('../../imgs/global/query.png');
    return (
      <View style={styles.radioGroup}>
        <TouchableOpacity activeOpacity={1} style={[styles.radioButton, buttonStyle]} onPress={() => { this.select() }}>
          <View style={[styles.circle, circleStyle]}>
            {
              radioKey == selectedKey ? (<View style={[styles.selectedCircle, selectedCircleStyle]}></View>) : null
            }
          </View>
          <View style={[styles.radioGroup, textStyleBox]}>
            <Text style={[styles.radioText, textStyle, radioKey == selectedKey ? styles.fontWidth : null]}>{radioValue}</Text>
            {icon ? <TouchableOpacity onPress={() => { this.titleImgCallBack(radioValue) }} style={{ paddingLeft: 0 * scale }}><Image source={titleImgObj}></Image></TouchableOpacity> : null}
          </View>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  radioGroup: {
    flexDirection: 'row',
    alignItems: 'center',
    minWidth: 30 * scale
  },
  radioButton: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 15 * scale,
  },
  circle: {
    width: 14 * scale,
    height: 14 * scale,
    borderStyle: 'solid',
    borderColor: '#0E7FFD',
    borderWidth: 1 * scale,
    borderRadius: 7 * scale,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 6 * scale,
  },
  selectedCircle: {
    width: 6 * scale,
    height: 6 * scale,
    borderStyle: 'solid',
    borderColor: '#0E7FFD',
    borderWidth: 1 * scale,
    borderRadius: 3 * scale,
    backgroundColor: '#0E7FFD',
  },
  radioText: {
    fontSize: 14 * scale,
    color: '#333'
  },
  fontWidth: {
    fontWeight: 'bold'
  }
})